<template>
  <view class="address">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="地址管理" @clickLeft="back" />
    <div class="address-list div-sizing">
      <div v-for="(item,index) in list" :key="index" class="flex-between-center address-item div-sizing"
        @click.stop="changeAddress(item)">
        <div class="flex-between-center address-left">
          <image src="../../../static/mine/address/address-img.png" mode=""></image>
          <div class="address-left-con">
            <div class="left-top">
              <span class="left-top-name">{{ item.name }}</span>
              <span class="left-top-tel">{{ item.tel }}</span>
              <span v-if="item.status === 1" class="address-default">[默认]</span>
            </div>
            <div class="left-center van-multi-ellipsis--l2">
              {{ item.address_detail + ' ' + item.address_all }}
            </div>
          </div>
        </div>
        <div class="address-right" @click.stop="editBtn(item)">
          编辑
        </div>
      </div>
    </div>
    <div class="div-sizing vant-btn">
      <button @click="addAddress">
        新建收货地址
      </button>
    </div>
  </view>
</template>

<script>
  import {
    getAddressList
  } from '@/api/mine/mine.js'
  export default {
    data() {
      return {
        list: [],
        type: ''
      }
    },
    onLoad(opt) {
      this.type = opt.type || '111'
    },
    onShow() {
      this.get_address_list()
    },
    methods: {
      changeAddress(item) {
        console.log(item);
        this.$ui.setStorage('addList', item)
        if (this.type == 'change') {
          uni.navigateBack()
        }
      },
      editBtn(item) {
        console.log(item, 123132123);
        this.$ui.push(`/pages/mine/address/address_edit?type=2`)
        this.$ui.setStorage('addList', item)
      },
      /**
       * 返回
       */
      back() {
        uni.navigateBack()
      },
      addAddress() {
        console.log(123123);
        this.$ui.push('/pages/mine/address/address_edit')
      },
      get_address_list() {
        getAddressList().then(res => {
          console.log(res, 123123123);
          if (res.code === 1) {
            const _list = res.data.map(function(item) {
              item.address = item.address_detail.replace(/\s+/g, '') + item.address_all
              item.isDefault = parseInt(item.status) === 1
              return item
            })
            this.list = _list
          }
        })
      },
    }
  }
</script>

<style lang="less">
  .address {

    // min-height: 100vh;
    .address-list {
      padding: 0 22rpx 1.6rem;

      .address-item {
        margin-bottom: 30rpx;
        padding: 20rpx 0;

        .address-img {
          width: 68rpx;
          height: 68rpx;
          margin-right: 20rpx;
        }

        .address-left {
          flex: 1;
          justify-content: flex-start;

          image {
            width: 35rpx;
            height: 35rpx;
          }
        }

        .left-top-name {
          color: #333333;
          font-size: 32rpx;
          margin-right: 12rpx;
        }

        .left-top-tel {
          color: #acacac;
          font-size: 24rpx;
          margin-right: 10rpx;
        }

        .address-default {
          font-size: 24rpx;
          color: #ecb047;
        }

        .left-center {
          max-width: 400rpx;
          color: #333333;
          font-size: 26rpx;
          margin-top: 10rpx;
        }

        .address-right {
          font-size: 24rpx;
          color: #acacac;
          padding: 6rpx 0 6rpx 20rpx;
          border-left: 2rpx solid #acacac;
        }
      }
    }

    .van-address-item {
      background: #f5f5f5;
    }

    .van-tag--danger {
      background-color: #ff0f0f;
    }

    .van-address-img {
      width: 68rpx;
      height: 68rpx;
    }

    .vant-btn {
      position: fixed;
      bottom: 100rpx;
      width: 100%;
      height: auto;
      margin: 0;

      // border-top: 1rpx solid #F5F5F5;
      .van-button {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        position: static;
        font-size: 28rpx;
        border-radius: 34rpx;
      }
    }

    // .vant-btn-bottom {
    //   margin-bottom: 90rpx;
    // }
  }
</style>
